<template>
  <div id="expansion-panel">
    <slot name="open" v-if="isOpen"></slot>
    <slot name="close" v-if="!isOpen"></slot>
    <div class="expansion-btn-container">
      <div class="expansion-btn" @click="togglePanel"></div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'expansion-panel',
  props: {
    value: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      isOpen: this.value
    };
  },
  methods: {
    togglePanel() {
      this.isOpen = !this.isOpen;
      this.$emit('toggle', this.isOpen);
    }
  }
};
</script>
<style lang="stylus" scoped>
#expansion-panel {
  padding: 30px;
  background: #fff;
  box-shadow: 0px 2px 8px 0px rgba(191, 191, 191, 0.5);
  border-radius: 10px;
  position: relative;

  .expansion-btn-container {
    display: flex;
    justify-content: center;
    position: absolute;
    bottom: 20px;
    width: 100%;

    .expansion-btn {
      height: 8px;
      width: 88px;
      border-top: 1px solid #e0e0e0;
      border-bottom: 1px solid #e0e0e0;
    }
  }
}
</style>